import './index.less';

import { HomeOutlined, UserOutlined } from '@ant-design/icons';
import { Button,Checkbox,Form, Input } from 'antd';
import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
import React from 'react';
import { useNavigate } from 'react-router-dom';


function Index() {
  let video: boolean,voice: boolean;
  const onChange = (e: CheckboxChangeEvent) => {
    video = e.target.checked ;
  };
  const onChange1 = (e: CheckboxChangeEvent) => {
    voice = e.target.checked;
  };
  const navigate = useNavigate();
  const onFinish = (values: any) => {
    values.video = video=== undefined ? false:video;
    values.voice = voice === undefined ? false:voice;
    navigate('/room', { state: values });
  };
  
  return (
    <div className='login-container'>
        <div className='login-main'>
          <div className='login-title'>
            <p style={{fontSize:'36px'}}>Video Call</p>
          </div>
          <div className='login-form'>
            <Form
              layout="vertical"
              onFinish={onFinish}
            >
              <Form.Item 
                label="房间名称" 
                name='channelName'
                rules={[{ required: true, message: 'Please input your roomName!' },
                {required: true,max:10,min:2,
                  pattern:new RegExp(/^[0-9a-zA-Z]{1,}$/, 'g'),message:'房间名长度应为2-10,且只能为数字/字母'}]}
              >
                <Input prefix={<HomeOutlined />} placeholder="请输入房间名称" />
              </Form.Item>
              <Form.Item
                label="用户名称"
                name='uid'
                rules={[{ required: true, message: 'Please input your userID!' }]}
              >
                <Input prefix={<UserOutlined />}  placeholder="请输入用户名"  />
              </Form.Item>
              <Form.Item
                name='video'>
              <Checkbox onChange={onChange} defaultChecked={false}>打开摄像头</Checkbox>
              </Form.Item>
              <Form.Item
                name='voice'>
                <Checkbox onChange={onChange1} defaultChecked={false}>打开麦克风</Checkbox>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType='submit' style={{width:'100%'}} >加入房间</Button>
              </Form.Item>
              
            </Form>
          </div>
        </div>
    </div>
  );
}

export default Index;